<template>
  <div id="asideBar" >
    <div class="tap" :key="item.name" @click="clickHandle(index,item.path)" v-for="(item,index) in aside" :class="index==active?'active':''">
      <i :class="item.icon"> {{item.name}}</i>
    </div>
  </div>


</template>

<script>

export default {
  name: "Aside",
  data(){
    return{
      aside:[
        {name:'首页推荐',icon:'el-icon-s-opportunity',path:'/home/recommend'},
        {name:'用户动态',icon:'el-icon-s-opportunity',path:'/home/dynamic'},
        {name:'平台资源',icon:'el-icon-notebook-2',path:'/home/platforms'},
        {name:'企业题库',icon:'el-icon-notebook-1',path:'/home/companyPractice'},
        {name:'企业视频',icon:'el-icon-notebook-2',path:'/home/companyVideo'},
        {name:'企业应聘',icon:'el-icon-position',path:'/home/recruitment'},
      ],
      active:0
    }
  },
  created() {
    if(localStorage.getItem("userType")!='student'){
      this.aside=[
        {name:'首页推荐',icon:'el-icon-s-opportunity',path:'/home/recommend'},
        {name:'用户动态',icon:'el-icon-s-opportunity',path:'/home/dynamic'},
        {name:'企业应聘',icon:'el-icon-position',path:'/home/recruitment'},
      ]
    }

    let route=this.$route.fullPath
    for (let i in this.aside){
      if(this.aside[i].path==route){
        this.active=i
      }

    }
  },
  methods:{
    clickHandle(index,path){
      this.active=index
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
#asideBar{
  height: 300px;
  width: 170px;
  background-color: #fff;

}
.tap{
  transition: all .2s;
  cursor: pointer;
  height: 40px;
  width: 100%;
  line-height: 40px;
  box-sizing: border-box;
  padding-left: 20px;
  margin-bottom: 8px;
  color: rgb(109,109,109);
}
.active{
  background-color: rgba(255,255,255,.8);
  color: rgb(0,136,245);;
}

.tap:hover{
  color: rgb(0,136,245);
}

</style>
